<template>
  <el-date-picker
    v-bind="$attrs"
    v-on="$listeners"
    style="width: 250px"
    type="week"
    :format="'yyyy 第 WW 周' + format"
    value-format="yyyy-MM-dd"
    placeholder="请选择周"
    :editable="false"
    :clearable="false"
    :picker-options="pickerOptions"
  >
  </el-date-picker>
</template>
<script>
export default {
  name: "ElWeek",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          // 当天为周一时，无法选择当天日期
          const week = new Date().getDay();
          if (week == 1) {
            return time.getTime() > Date.now() + 24 * 60 * 60 * 1000;
          } else {
            return time.getTime() > Date.now();
          }
        },
        firstDayOfWeek: 1,
      },
    };
  },
  computed: {
    format() {
      if (this.$attrs.value) {
        const day = new Date(this.$attrs.value).getDate();
        const beginTime = this.parseTime(
          new Date(this.$attrs.value).setDate(day - 1),
          "{m}.{d}"
        );
        const endTime = this.parseTime(
          new Date(this.$attrs.value).setDate(day + 5),
          "{m}.{d}"
        );
        return `（${beginTime}-${endTime}）`;
      } else {
        return "";
      }
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
  },
};
</script>
